<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head lang="en">
    <meta charset="UTF-8"/>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <!--    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>-->
    <link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.4/css/layui.css"  media="all">
    <script src="https://www.layuicdn.com/layui-v2.5.4/layui.js" charset="utf-8"></script>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <title></title>
</head>
<body>
<form class="layui-form" action="">
    <div class="layui-form-item">
        <div class="layui-input-inline">
            *賬號 <input type="text" name="account" lay-verify="required" lay-reqtext="請輸入賬號" placeholder="请输入賬號" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-inline">
            角色ID<input type="text" name="name" lay-verify="required" lay-reqtext="請輸入角色ID" placeholder="请输入角色ID" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-inline">
            物品編號<input type="text" name="itemid" lay-verify="required" lay-reqtext="請輸入物品編號" autocomplete="off" placeholder="请输入物品編號" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-inline">
            強化度<input type="text" name="enchantlvl" lay-verify="required" lay-reqtext="請輸入強化度" autocomplete="off" placeholder="请输入強化度" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-inline">
            是否祝福：是<input type="radio" name="bless" value="0" checked="">否<input type="radio" name="bless" value="1" >
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-inline">
            數量<input type="text" name="count" lay-verify="required" lay-reqtext="請輸入數量" autocomplete="off" placeholder="请输入數量" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-inline">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即創建</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>


<!--s-->
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
    layui.use(['form'], function(){
        var form = layui.form
            ,layer = layui.layer;

        //监听提交
        form.on('submit(demo1)', function(data){
            layer.alert(JSON.stringify(data.field), {
                title: '最终的提交信息'
            })
            return false;
        });

        //表单赋值
        layui.$('#LAY-component-form-setval').on('click', function(){
            form.val('example', {
                "account": form.val('account') // "name": "value"
                ,"name": form.val('name')
                ,"itemId": form.val('itemId')
                ,"enchantlvl": form.val('enchantlvl') //复选框选中状态
                ,"bless": form.val('bless') //开关状态
                ,"count": form.val('count')
            });
        });

        //表单取值
        layui.$('#LAY-component-form-getval').on('click', function(){
            var data = form.val('example');
            alert(JSON.stringify(data));
        });

        //监听提交
        form.on('submit(demo1)', function(data){
            // return true;
            alert(JSON.stringify(data));
            $.ajax({
                url: '/user/save',
                method:'post',
                data: data.field,
                success: function (data) {
                    layer.msg("提交成功")
                }
        });
        });
    });
</script>
</body>
</html>